import { Container, Events, AppProps } from "@/components/custom/index.tsx";
import { Button } from '@arco-design/web-vue'
import { definitionInput, definitionSelect, definitionMonacoEditor } from '@/components/custom/incident'
import SvgIcon from '@/components/Svg/index.vue'
export default ({
    type: 'common',
    label: "按钮",
    description: "",
    hidden: false,
    isform: false, draggable: true,
    icon() {
        return <SvgIcon name="btn"></SvgIcon>
    },
    preview: () => {
        return <Button type="primary">Primary</Button>
    },
    render: (props: any, { }: Container, app: AppProps) => {

        return <Button {...props}>{props.text}</Button>
    },
    props: {
        text: definitionInput({
            type: 'string',
            label: '内容',
            placeholder: '请输入内容',
            defaultValue: "Primary",
        }),
        type: definitionSelect({
            type: "string",
            label: "类型",
            placeholder: "请选择类型",
            options: [{
                label: '主要按钮',
                value: 'primary',
            }, {
                label: '次要按钮',
                value: 'secondary',
            }, {
                label: '虚线按钮',
                value: 'dashed',
            }, {
                label: '线形按钮',
                value: 'outline',
            }, {
                label: '文本按钮',
                value: 'text',
            }],
            defaultValue: "primary",
        }),
        "html-type": definitionSelect({
            type: "string",
            label: "HTML类型",
            placeholder: "请选择HTML类型",
            options: [{
                label: 'submit',
                value: 'submit',
            },
            {
                label: 'reset',
                value: 'reset',
            },
            {
                label: 'button',
                value: 'button',
            }],
            defaultValue: "button",
        })

    },
    style: {

    },
    events: {
        onClick: definitionMonacoEditor({
            type: 'string',
            label: "点击事件",
            placeholder: '请输入内容',
            defaultValue: ''
        }),
    }

}) as Container